interface columnsData {
  title?: string;
  dataIndex?: string;
  width?: number;
  slotName?: string;
  align?: string;
  fixed?: string;
  titleSlotName?: string;
}
import clonedeep from 'lodash.clonedeep';
import IconFont from '@/components/IconFont/index.vue';
export default defineComponent({
  emits: ['update:ids'],
  props: {
    // 表头数据
    head: {
      type: Array,
      default: () => []
    },
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 打开设置表头弹窗
    change: {
      type: Function
    },
    applyEntry: {
      type: Boolean,
      default: false
    },
    ids: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit, slots, expose }) {
    // 存储表头数据
    const columns = reactive<columnsData[]>([
      { title: '序号', dataIndex: 'rowIndex', width: 100, align: 'center' }
    ]);
    // 存储表格数据
    const tableData: any = reactive([]);
    // 选中表格数据
    const selectedListData: any = reactive({ data: [] });
    // 选中表格数据id

    // 处理表格数据函数
    const manageData = (data: any) => {
      const allObj: any = {};
      data.map((ele: any) => {
        if (
          ele.ctlCode === 'CEE710BACA80445DE9A39622878DF04A2' &&
          ele.controlValue !== ''
        ) {
          ele.controlValue == 1
            ? (ele.controlValue = '男')
            : (ele.controlValue = '女');
        }
        if (
          ele.ctlCode === 'C6413B1A7762943709D65A4DF52CD09FD' &&
          ele.controlValue !== ''
        ) {
          ele.controlValue == 0
            ? (ele.controlValue = '身份证')
            : (ele.controlValue = '护照');
        }

        const key = ele.ctlCode;
        const value = ele.convertValue ? ele.convertValue : ele.controlValue;
        allObj[key] = value;
      });
      return allObj;
    };
    // 审核渲染元素
    const auditElement = (node: number) => {
      const bagcolor = ['#cccccc', '#31c27c', '#ff0000'];
      const boxShadow = ['#f6f6f6', '#daf4e8', '#ffcccc'];
      const title = ['待审核', '审核通过', '审核不通过'];
      const style = {
        width: '12px',
        height: '12px',
        marginRight: '10px',
        borderRadius: '50%',
        backgroundColor: bagcolor[node - 1],
        border: `5px solid ${boxShadow[node - 1]}`
      };

      return (
        <div style=" display: flex;align-items: center;justify-content: center;">
          <div style={style}></div>
          <p>{title[node - 1]}</p>
        </div>
      );
    };
    // 选择
    const select = (e: number[]) => {
      emit('update:ids', e);
      selectedListData.data = tableData.filter(
        (ele: any) => e.indexOf(ele.key) !== -1
      );
    };
    // 全选、
    const allSelect = (e: boolean) => {
      const allArr: number[] = [];
      if (e) {
        tableData.map((ele: any) => allArr.push(ele.key));
        selectedListData.data = tableData.filter(
          (ele: any) => allArr.indexOf(ele.key) !== -1
        );

        emit('update:ids', allArr);
      }
    };
    expose({ selectedListData, tableData });
    // defineExpose({
    //   tableData
    // });
    // 处理传进来的表头和表格数据
    watch(
      () => props.head,
      () => {
        if (!props.head) return;
        columns.length = 0;
        props.head.map((ele: any) => {
          columns.push({
            title: ele.name,
            dataIndex: ele.code,
            width: 100,
            align: 'center'
          });
        });
        if (props.applyEntry) {
          columns.push({
            title: '审核状态',
            slotName: 'audit',
            width: 150,
            align: 'center'
          });
        }
        columns.push({
          title: '操作',
          slotName: 'optional',
          titleSlotName: 'headSlot',
          width: 180,
          align: 'center',
          fixed: 'right'
        });
      }
    );
    watch(
      () => props.data,
      () => {
        tableData.length = 0;
        props.data.length !== 0
          ? props.data.forEach((ele: any, index) => {
              tableData.push({
                key: ele.id,
                rowIndex: index + 1,
                node: ele.node,
                ...manageData(ele.details),
                oldData: ele.details,
                userId: ele.userId
              });
            })
          : null;
      }
    );
    return () => (
      <>
        <a-table
          onSelectAll={allSelect}
          onSelect={select}
          width={1000}
          columns={columns}
          data={tableData}
          bordered={true}
          stripe={true}
          table-layout-fixed={true}
          pagination={false}
          row-class="common-row"
          row-selection={{
            type: 'checkbox',
            showCheckedAll: true,
            onlyCurrent: false
          }}
          v-slots={{
            optional: (props: Record<'record', any>) => (
              <>{slots.operation?.({ data: props.record })}</>
            ),
            headSlot: () => (
              <>
                <div style="display:flex;justify-content: space-around;align-items: center;">
                  操作
                  <div style="margin-left: 20px;">
                    <IconFont
                      type="icon-filter-def"
                      size="26"
                      style=" marginRight: '10px',cursor: 'pointer' "
                    />
                    <a-tooltip content="设置表头">
                      <IconFont
                        type="icon-setting-def"
                        size="26"
                        style=" marginRight: '10px',cursor: 'pointer' "
                        onClick={() =>
                          props.change
                            ? props.change()
                            : console.log('又出错了小老弟')
                        }
                      />
                    </a-tooltip>
                  </div>
                </div>
              </>
            ),
            audit: (props: Record<'record', any>) =>
              !props.record.node ? '' : auditElement(props.record.node)
          }}
        ></a-table>
      </>
    );
  }
});
